<template>
  <view class="category-content">
    <view class="search-content">
      <view style="height: 16rpx;"></view>
      <view class="search-box">
        <image :src="$store.state.imgBaseUrl + '/icon/icon_search@2x.png'" v-show="showimage" ></image>
        <input type="text" placeholder-class="ipt" v-model="searcher" @confirm='getsearchList' @focus="getsearchName" @blur="setimage" placeholder="搜索商品" />
      </view>
    </view>
    <view class="category-info">
      <scroll-view class="info-left" scroll-y="true" show-scrollbar="false" scroll-with-animation="true" >
        <view v-for="(i,index) in toolManageList" :key ="index" @click="checkCategory(i)">
          <view class="left-item" :class="{active: i.id == selectedId}">{{i.name}}</view>
        </view>
      </scroll-view>
      <view class="line"></view>
      <scroll-view class="info-right" scroll-y="true" show-scrollbar="false" scroll-with-animation="true" v-if="brandList&&brandList.length>0">
        <view style="display: flex;flex-wrap: wrap;justify-content: start;">
          <view v-for="(item,index) in brandList" :key="index" class="brand-item" @click="gotoGoodsList(item)">
            <image :src="item.href" class="brand-image"></image>
            <view class="brand-name">{{item.name}}</view>
          </view>
        </view>
      </scroll-view>
      <view class="info-right empty" v-if="isRequest&&(!brandList || brandList.length==0)">
        <image :src="$store.state.imgBaseUrl + '/empty_list.png'" style="width: 340rpx;height: 340rpx;margin-top: 153rpx;"></image>
        <text style="height:36rpx;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);line-height: 36rpx;">暂无数据</text>
        <text style="height:29rpx;font-size:30rpx;font-weight:500;color:rgba(102,102,102,1);line-height: 29rpx;margin-top: 35rpx;">先去逛逛吧~</text>
      </view>
    </view>
  </view>
</template>

<script>
import { categoryFind } from '../../service/purchaseShop/purchaseShop.service.js'
export default{
  data(){
    return{
      toolManageList: [],
      selectedId: 0,
      pageIndex: 1,
      brandList: [],
      showimage:true,
      searcher:'',
      isRequest:false
    }
  },
  onLoad(option) {
    if(option.id){
      this.selectedId = option.id;
    }
  },
  onShow:function() {
		
  },
  mounted() {
    this.categoryFinds();
    this.getBrands();
  },
  methods:{
    categoryFinds () { // 类目
      categoryFind({},res => {
        this.toolManageList = res.data || [];
      })
    },
    getBrands() {
      let params = {id:this.selectedId}
      categoryFind(params,(res => {
        if (res.status == 0) {
          this.brandList = res.data || [];
          this.isRequest = true
        }
      }))
    },
    checkCategory(item){
      if(item.id != this.selectedId){
        this.selectedId = item.id
        this.getBrands();
      }
    },
    getsearchName () {
      this.showimage = false
    },
    setimage () {
      this.showimage = true
      this.searcher = ''
    },
    gotoGoodsList (item) {
      uni.navigateTo({
        url:`/pages/purchaseShop/goodList?title=${item.name}&id=${item.id}`
      })
    },
    // 搜索商品
    getsearchList () {
      let searcher = this.searcher
      // let type = this.type
      uni.navigateTo({
        url:`/pages/purchaseShop/goodList?name=${searcher}&stype=search`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.category-content{
		background:rgba(255,255,255,1);
		.search-content{
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 24rpx;
			.search-box{
				height:72rpx;
				background:rgba(255,255,255,1);
				box-shadow:0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.05);
				border-radius:8rpx;
				display: flex;
				image {
				  width: 32rpx;
				  height: 32rpx;
				  margin: 20rpx 0 20rpx 282rpx;
				}
				input {
				  margin: 20rpx 0 20rpx 20rpx;
				  font-size: 24rpx;
				  font-family: PingFangSC-Regular, PingFang SC;
				  font-weight: 400;
				  color: rgba(194, 194, 194, 1);
				  line-height: 34rpx;
				}
				.ipt {
				  font-size: 24rpx;
				  font-family: PingFangSC-Regular, PingFang SC;
				  font-weight: 400;
				  color: rgba(194, 194, 194, 1);
				  line-height: 34rpx;
				}
			}
		}
		.category-info{
			display: flex;
			height: calc(100vh - 112rpx);
			.info-left{
				width:172rpx;
				height: 100%;
				.left-item{
					height:88rpx;
					text-align: center;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					font-size:26rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:88rpx;
					&.active {
					  font-size:32rpx;
					  font-family:PingFangSC-Medium,PingFang SC;
					  font-weight:500;
					  color:rgba(194,162,92,1);
					}
				}
			}
			.line{
				height: 100%;
				width: 1px;
				background: #EEEDED;
			}
			.info-right{
				width: 570rpx;
				height: 100%;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.brand-item {
				  text-align: center;
				  display: inline-block;
				  margin-top: 28rpx;
				  margin-bottom: 12rpx;
				  margin-left: 20rpx;
				  margin-right: 20rpx;
				  .brand-image{
					  width:132rpx;
					  height:132rpx;
					  background:rgba(255,255,255,1);
					  border-radius:4rpx;
				  }
				  .brand-name{
					  height:34rpx;
					  font-size:24rpx;
					  font-family:PingFangSC-Regular,PingFang SC;
					  font-weight:400;
					  color:rgba(51,51,51,1);
					  line-height:34rpx;
					  margin-top: 20rpx;
				  }
				}
			}
      .empty{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
		}
	}
</style>
